<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜单列表"
      row-key="path"
      :indent="30"
      :columns="columns"
      :request-api="getAuthMenuListApi"
      :pagination="false"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="addMenu" v-auth="'新增菜单'">新增菜单</el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.meta.icon"></component>
        </el-icon>
      </template>
      <template #isAffix="{ row }">
        <el-switch v-model="row.meta.isAffix"></el-switch>
      </template>
      <template #isFull="{ row }">
        <el-switch v-model="row.meta.isFull"></el-switch>
      </template>
      <template #isHide="{ row }">
        <el-switch v-model="row.meta.isHide"></el-switch>
      </template>
      <template #isKeepAlive="{ row }">
        <el-switch v-model="row.meta.isKeepAlive"></el-switch>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button
          type="primary"
          link
          :icon="Plus"
          v-if="scope.row.redirect !== '' && scope.row.component === ''"
          @click="addChildMenu(scope.row)"
          v-auth="'新增菜单'"
          >新增子菜单</el-button
        >
        <el-button type="primary" link v-if="!scope.row.children" @click="go(scope.row.id)" v-auth="'资源列表'"
          >资源列表</el-button
        >
        <el-button type="primary" link :icon="EditPen" @click="editMenu(scope.row)" v-auth="'编辑菜单'">编辑</el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteMenu(scope.row)" v-auth="'删除菜单'">删除</el-button>
      </template>
    </ProTable>
    <MenuDrawer ref="MenuDrawerRef"></MenuDrawer>
  </div>
</template>

<script setup lang="ts" name="menuMange">
import { ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { getAuthMenuListApi } from "@/api/modules/login";
import { Delete, EditPen, CirclePlus, Plus } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import MenuDrawer from "./components/MenuDrawer.vue";
import { useAuthStore } from "@/stores/modules/auth";
import { deleteRoute } from "@/api/modules/routes";
import { useRouter } from "vue-router";

const router = useRouter();

const go = (id: any) => {
  router.push({ name: "Resource", query: { id } });
};

const authStore = useAuthStore();

const proTable = ref();

// 表格配置项
const columns: ColumnProps[] = [
  { type: "index", label: "#", width: 150 },
  { prop: "meta.title", label: "菜单名称", align: "left", width: 350 },
  { prop: "meta.icon", label: "菜单图标" },
  { prop: "name", label: "菜单 name" },
  { prop: "path", label: "菜单路径", width: 300 },
  { prop: "component", label: "组件路径", width: 300 },
  { prop: "isAffix", label: "是否固定" },
  { prop: "isHide", label: "是否隐藏" },
  { prop: "isFull", label: "是否全屏" },
  { prop: "isKeepAlive", label: "是否缓存" },
  { prop: "meta.isLink", label: "是否外部链接" },
  { prop: "operation", label: "操作", width: 300, fixed: "right" }
];

// 删除菜单（示例、根据自己后端接口来）
const deleteMenu = async (params: any) => {
  await useHandleData(deleteRoute, { ids: [params.id] }, `删除【${params.meta.title}】菜单`);
  proTable.value.getTableList();
};

// -----------------菜单抽屉相关-------------------
const MenuDrawerRef = ref<InstanceType<typeof MenuDrawer> | null>();
// 新增菜单
const addMenu = () => {
  const params: any = {
    rowData: undefined,
    api: getAuthMenuListApi,
    type: "add",
    pid: 1,
    getTable: proTable.value.getTableList
  };
  MenuDrawerRef.value?.acceptParams(params);
};
const editMenu = (row: any) => {
  let parentTitle = "根目录";
  // 找出上级路由
  const index = authStore.flatMenuListGet.findIndex((e: any) => e.id === row.pid);
  if (index !== -1) {
    parentTitle = authStore.flatMenuListGet[index].meta.title;
  }
  const params: any = {
    rowData: row,
    api: getAuthMenuListApi,
    parentTitle,
    type: "edit",
    getTable: proTable.value.getTableList
  };
  MenuDrawerRef.value?.acceptParams(params);
};
const addChildMenu = (row: any) => {
  const params: any = {
    rowData: undefined,
    api: getAuthMenuListApi,
    parentTitle: row.meta.title,
    type: "add",
    pid: row.id,
    getTable: proTable.value.getTableList
  };
  MenuDrawerRef.value?.acceptParams(params);
};
</script>
